<template>
    <div>
        <el-card>
            <ReturnPage></ReturnPage>

            <el-tabs v-model="activeName"
                     @tab-click="handleClick">

                <el-tab-pane label="图形"
                             name="first">
                    <el-form ref="form"
                             :model="form"
                             label-width="300"
                             label-position="right">
                        <el-form-item label="名称"
                                      label-width="80px">
                            <el-input v-model="form.name"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form-item label="宽"
                                      label-width="80px">
                            <el-input v-model="form.width"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form-item label="高"
                                      label-width="80px">
                            <el-input v-model="form.height"
                                      class="width"></el-input>
                        </el-form-item>
                        <el-form :inline="true"
                                 label-width="70px">
                            <div v-for="(item, index) in markForm.dynamicItem"
                                 :key="index">
                                <el-form-item label="名称"
                                              :prop="'dynamicItem.' + index + '.name'">
                                    <span>123</span>
                                </el-form-item>
                                <el-form-item label="功能"
                                              :prop="'dynamicItem.' + index + '.key'">
                                    <el-select v-model="value"
                                               placeholder="请选择">
                                        <el-option v-for="item in options"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="绘图风格"
                                              :prop="'dynamicItem.' + index + '.name'">
                                    <el-select v-model="value"
                                               placeholder="请选择">
                                        <el-option v-for="item in options1"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="纵轴Y侧"
                                              :prop="'dynamicItem.' + index + '.key'">
                                    <el-select v-model="value"
                                               placeholder="请选择">
                                        <el-option v-for="item in options2"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="颜色"
                                              :prop="'dynamicItem.' + index + '.name'">
                                    <el-input v-model="item.name"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button v-if="index+1 == markForm.dynamicItem.length"
                                               @click="addItem"
                                               type="primary"
                                               size="mini">增加</el-button>
                                    <el-button @click="deleteItem(item, index)"
                                               type="danger"
                                               size="mini">删除</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="onSubmit"
                                       size="mini">确定</el-button>

                        </el-form-item>
                    </el-form></el-tab-pane>
                <el-tab-pane label="预览"
                             name="second">

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                options: [{
                    value: '1',
                    label: '所有'
                }, {
                    value: '2',
                    label: '最小'
                }, {
                    value: '3',
                    label: '平均'
                }, {
                    value: '4',
                    label: '最大'
                },],
                options1: [{
                    value: '1',
                    label: '填满的区域'
                }, {
                    value: '2',
                    label: '粗线'
                }, {
                    value: '3',
                    label: '点'
                }, {
                    value: '4',
                    label: '虚线'
                }, {
                    value: '5',
                    label: '梯度线'
                }],
                options2: [{
                    value: '1',
                    label: '左侧'
                }, {
                    value: '2',
                    label: '右'
                }],
                radio: '1',
                markForm: {
                    dynamicItem: [
                        {
                            name: "",
                            phone: ""
                        }
                    ]
                },
                form: {
                    a: '90d',
                    b: '365d',
                    name: '',
                    type: [],
                    type1: []
                },
                activeName: 'first'
            };
        },
        methods: {
            //追加数据
            addItem () {
                this.markForm.dynamicItem.push({
                    name: "",
                    key: ""
                });
            },
            //删除
            deleteItem (item, index) {
                this.markForm.dynamicItem.splice(index, 1);
            },
            //切换
            handleClick (tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>
<style scoped>
    .width {
        width: 600px;
    }
    .el-radio__input.is-checked + .el-radio__label {
        font-size: 16px;
    }
</style>